<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../../CSS/button_Submit_Reset.css" rel="stylesheet" />
		<title>userList_add</title>
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				
				
				$(".add").click(function(){
					//获取元素
					var tr = $(this).closest('tr')
					var inpName = tr.find('td:eq(1)').find('input:text')
					var inpAge = tr.find('td:eq(2)').find('input:number')
					var inpSex = tr.find('td:eq(3)').find('input:text')
					
					var name=$.trim(inpName.val())
					var age=$.trim(inpAge.val())
					var sex=$.trim(inpSex.val())
					
					var str = `\n姓名=${name}\n年龄=${age}\n性别=${sex}\n`
					//判断是否空
					if(name!=""&&age!=""&&sex!=""){
						var addFlag = confirm(`确认插入一条${str} 的数据？`)
						//判断是否插入
						if(addFlag == 1){
							
							var url = "http://localhost:8090/user/add"
							var data = setUser(null,name,age,sex)
							$.post(url,data,function(data){
								console.log(data)
								console.log("插入成功！")
								//重置内容
								inpName.val("")
								inpAge.val("")
								inpSex.val("")
								
							})
						}else{
							console.log("未插入！")
						}
					}else{
						alert(`数据${str}中有空值，请检查！`)
					}
					
				})
				
				function setUser(id,name,age,sex){
					var user = {
						"id":id,
						"name":name,
						"age":age,
						"sex":sex
					}
					return user
				}
				
			})
			
		</script>

	</head>
	<body>
		<div>
			<table border="1px" align="center" width="80%" id="d4_t1">
				<tr align="center">
					<td colspan="4">
						<h1>用户添加</h1>
					</td>
				</tr>

			</table>
			<table border="1px" align="center" width="80%" id="d4_t2">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th colspan='2'>操作</th>
				</tr>
				<tr align="center">
					<td>

					</td>
					<td>
						<input type="text" name="name" placeholder="请输入姓名..." />
					</td>
					<td>
						<input type="number" name="age" placeholder="请输入年龄..." />
					</td>
					<td>
						<input type="text" name="sex" placeholder="请输入性别..." />
					</td>
					<th colspan='2'>
						<button type="button" class="add">添加</button>
					</th>
				</tr>



			</table>

		</div>

	</body>
</html>
